<template>
    <div class="info-box">
        <div class="i-nav">
            <span class="c-title-4"> {{ $t('message.DateAlter.f') }}</span>
            <span class="more" @click="toLink">
                {{ $t('message.Rank.g') }}
                <span class="iconfont icon-gengduo"></span>
            </span>
        </div>
        <div class="i-empty" v-if="windowList.length == 0">
            <JEmpty></JEmpty>
        </div>
        <div class="i-list" v-else>
            <div class="i-item" v-for="(j, jindex) in windowList">
                <div class="row1">
                    <span class="iconfont icon-box"
                        :class="j.origin?.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                    <div @click="naviGetTo(j.origin, j.origin?.toAddress || j.origin?.toTag)"
                        class="row1-title hover-text  c-title-4 long-txt address-title"
                        v-if="j.origin?.fromAddressType == 'cex'">{{
                            intercept(j.origin?.toAddress || j.origin?.toTag) }}</div>
                    <div @click="naviGetTo(j.origin, j.address)"
                        class="row1-title  hover-text c-title-4 long-txt address-title" v-else>{{
                            intercept(j.address) }}
                    </div>
                    <div class="ago c-title-5">
                        <TimeTips :text="j.matTime">{{ j.time }}</TimeTips>
                    </div>
                </div>
                <div class="row1">
                    <div class="row2-title c-title-4 long-txt" v-if="j.origin?.type == 'swap'">
                        <span>Swap {{ j.origin?.outSymbol }} to {{ j.origin?.inSymbol }}</span>
                    </div>
                    <div class="row2-title c-title-4 long-txt " v-else-if="j.origin?.action == 'transfer'">
                        Send to {{ j.origin?.toAddress }} {{ j.origin?.toTag }}
                    </div>
                    <div class="row2-title c-title-4 long-txt" v-else-if="j.origin?.action == 'deposit'">
                        {{ j.origin?.action }} to {{ j.origin?.toAddress }} {{ j.origin?.toTag }}
                    </div>
                    <div class="row2-title c-title-4 long-txt" v-else>
                        {{ j.origin?.action }} from {{ j.origin?.fromAddress || j.origin?.fromTag }}
                    </div>
                </div>
                <div class="row3 d-flex flex-column" v-if="j.origin?.type == 'swap'">
                    <div class="d-flex align-center mt6">
                        <div class="l-num d-flex align-center">
                            <img :src="j.outimg" class="i-cons">
                            <span class="amout outAmout">{{
                                formatBigNumber(j.origin?.outAmount) }}</span>
                            <VIcon class="arrow-icon">mdi mdi-arrow-right-thin</VIcon>
                            <img :src="j.inimg" class="i-cons">
                            <span class="amout inAmout">+{{
                                formatBigNumber(j.origin?.inAmount) }}</span>
                        </div>
                        <div class="ago c-title-5 wit">{{ formatBigNumber(j.origin?.inusdt ||
                            j.origin?.outusdt) }}</div>
                    </div>
                </div>
                <div class="row1" v-else>
                    <div class="l-num d-flex align-center">
                        <img :src="j.outimg" class="i-cons">
                        <span class="amout">{{
                            formatBigNumber(Math.abs(j.origin?.outAmount)) }}</span>
                        <span class="symbol hover-text" @click="toToekn(j.origin?.outTokenAddress)">#{{ j.origin?.outSymbol
                        }}</span>
                    </div>
                    <div class="ago c-title-5 wit">${{ formatBigNumber(j.origin?.inusdt ||
                        j.origin?.outusdt) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import JEmpty from "@/components/j-empty/index.vue";
import JNumber from '@/components/j-number/index.vue';
import { Bus, CONN_FLUCTUATION, CONN_BIG_AMOUNT, KLINE_RESET } from "@/connetion/Bus";
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
import { formatNumber, formatBigNumber, formatTimestamp, formatTimeAgo } from "@/comm/format";
import { useActivity } from "@/stores/activity";
import indication from "../component/indication/index.vue";
import { uuidCreate } from "@/comm/uuid";
import { useTokens } from '@/stores/tokens';
import { useRouter } from "vue-router";
import TimeTips from "@/components/timeTips/index.vue";

import i18n from "@/locals";
import { useKline } from "@/stores/kline";
const router = useRouter()
const tokens = useTokens()
const kline = useKline();
const onboarding = ref(0)
const activity = useActivity();
const dataAry = ref<any[]>([]);
const windowList = ref<any[]>([])
let timerId = 0;
const PesonURL = '/address/';
const BrowserURL = '/entity/';
Bus.on(CONN_BIG_AMOUNT, (val: any) => {
    // console.log("add big CONN_BIG_AMOUNT--", val)
    addTransaction(val);
    // initData()
});
onMounted(async () => {
    timerId = window.setInterval(() => {
        dataAry.value.forEach((val: any) => {
            val.time = formatTimeAgo(val.timestamp);
        })
    }, 1000)
    initData()
    Bus.on(KLINE_RESET, (val: any) => {
        initData();
    })
});
onUnmounted(() => {
    clearInterval(timerId)
});
function toToekn(id: string) {
    window.open("/token/" + id)
}
const findKey = (targetValue: any, item: any) => {
    let key = ''
    for (let i in item) {
        if (targetValue == item[i]) {
            key = i
        }
    }
    return key
}
function naviGetTo(event: any, str: any) {
    const key = findKey(str, event)
    if (key == 'address') {
        if (event.fromAddressType == 'eoa' && event.address) {
            window.open(PesonURL + event.address)
        }
    }
    if (key == 'toTag') {
        if (event.toEntityId && (event.toAddressType == 'cex' || event.toAddressType == 'fund')) {
            window.open(BrowserURL + event.toEntityId)
        }
    }
    if (key == 'fromTag') {
        if (event.fromEntityId && (event.fromAddressType == 'cex' || event.fromAddressType == 'fund')) {
            window.open(BrowserURL + event.fromEntityId)
        }
    }
    if (key == 'toAddress') {
        if (event.toAddressType == 'eoa') {
            window.open(PesonURL + event.toAddress)
        }
    }
    if(key == 'toEntityId'){
        if(event.toAddressType == 'fund' || event.toAddressType == 'cex'){
            window.open(BrowserURL + event.toEntityId)
        }
    }
    if(key == 'fromEntityId'){
        if(event.fromAddressType == 'fund' || event.fromAddressType == 'cex'){
            window.open(BrowserURL + event.fromEntityId)
        }
    }
}
/**过滤地址和交易所名称 */
function intercept(char: string) {
    // console.log('过滤地址!!!!!!!!!!!', char)
    if (!char.startsWith('0x')) return char
    const seat = "***";
    const seat_ = "...";
    let char_ = char;
    if (!char) return
    if (char_.length < 6) return char_;
    char_ = char.slice(0, 6).concat(seat).concat(char.slice(-6));
    if (char.indexOf('0x') === -1) {
        char_ = char;
        if (char.length > 20) {
            char_ = char.slice(0, 20).concat(seat_);
        }
    }
    return char_;
}

function getImg(address: string) {
    return tokens.getImg(address);
}
async function initData() {
    await activity.loadBigAmount();
    let ary = [...activity.bigAmounts];
    ary.sort((a: any, b: any) => a.timestamp > b.timestamp ? -1 : 1);
    const list: any[] = warpData(ary);
    dataAry.value = list.slice(0, 10);
    windowList.value = dataAry.value
    // console.warn('链上活动初始化#########################', dataAry.value)
}
function warpData(ary: any[]) {
    return ary.map(val => {
        return {
            title: val.type == "swap" ?
                i18n.global.t('message.Monitor.type.a') :
                i18n.global.t('message.Monitor.type.b'),
            swap: val.type == "swap",
            inimg: getImg(val.inSymbol),
            outimg: getImg(val.outSymbol),
            inAmount: val.inAmount ? formatBigNumber(Math.abs(val.inAmount)) : 0,
            outAmount: val.outAmount ? formatBigNumber(Math.abs(val.outAmount)) : 0,
            inSymbol: val.inSymbol,
            outSymbol: val.outSymbol,
            address: val.fromTag || val.address,
            toAddress: val.toTag || val.toAddress,
            time: formatTimeAgo(val.timestamp),
            matTime: formatTimestamp(val.timestamp),
            timestamp: val.timestamp,
            inusdt: formatBigNumber(val.inusdt),
            outusdt: formatBigNumber(val.outusdt),
            origin: val,
            id: uuidCreate()
        }
    });
}
const addTransaction = (val: any) => {
    onboarding.value = 0
    let t = warpData([val]);
    t.push(...dataAry.value);
    t.sort((a: any, b: any) => a.timestamp > b.timestamp ? -1 : 1);
    dataAry.value = t.slice(0, 10);
    windowList.value = dataAry.value
};
const changeWindowList = (list: any) => {
    // let result = []
    // for (let i = 0; i < list.length; i += 2) {
    //     if (i + 1 < list.length) {
    //         result.push([list[i], list[i + 1]]);
    //     } else {
    //         result.push([list[i]]);
    //     }
    // }
    // windowList.value = list
    // console.warn('链上活动#########################', windowList.value)
}
function toLink() {
    kline.saveLastData();
    router.push("/onChain");
}

</script>

<style lang="less" scoped>
.hover-text {
    course: pointer;

    &:hover {
        text-decoration: underline;
    }
}

.window-btn {
    :deep(.v-btn) {
        width: 30px;
        height: 30px;
        opacity: 0.6;
    }
}


.arrow-icon {
    margin: 0 5px 0 5px;
    font-size: 16px;
}

.amout {
    font-size: 14px;
    font-family: var(--font-family);
}

.inAmout {
    color: var(--win);
}

.outAmout {
    color: var(--lose);
}

.symbol {
    // margin-left: 5px;
    font-size: 14px;
    color: var(--color);
    font-family: var(--font-family);
}

.iconfont {
    margin-left: 2px;
    font-family: "iconfont" !important;
    font-size: 12px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.icon-box {
    margin-right: 2px;
    color: #737B82;
}

.info-box {
    display: flex;
    flex-direction: column;
    border-bottom: 3px solid #2E3345;
    height: 100%;

    .i-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #EAECEF;
        // margin: 15px 12px 4px;
        // padding: 10px 12px 0 12px;
        padding: 0 12px 0 12px;
        height: 35px;

        .more {
            font-size: 12px;
            color: var(--color);

            &:hover {
                color: var(--main);
            }

            .icon-gengduo {
                font-size: 12px;
            }
        }

    }

    .i-empty {
        height: calc(100% - 40px);

        :deep(.j-none) {
            height: 100%;
        }
    }

    .i-list {
        height: calc(100% - 35px);
        overflow-y: auto;
        box-sizing: border-box;
        // border-bottom: 3px solid #2E3345;
        // position: relative;
        // padding-bottom: 10px;

        .i-item {
            border-bottom: 1px solid #2E3345;
            padding: 8px 12px 8px 12px;

            &:first-child {
                padding-top: 0;
            }

            &:last-child {
                border-bottom: none;
            }

            // &:first-child {
            //     padding-top: 0;
            // }

            // &:last-child {
            //     margin-bottom: 0;
            //     border-bottom: none;
            //     padding: 10px 12px 0 12px;
            // }
        }
    }
}

.row3 {
    margin-bottom: 6px;

    .mt6 {
        margin-top: 6px;
    }

    &:last-child {
        margin-bottom: 0;
    }


    .address-title {
        color: #D9DCE0;
    }

    .row2-title {
        width: 240px;
        color: #EAECEF;
    }

    .row1-title {
        flex: 1 0 0;
        color: #EAECEF;
    }

    .ago {
        color: var(--main);
        margin-left: 10px;
    }

    .wit {
        color: #D9DCE0;
    }
}

.row1 {
    display: flex;
    margin-bottom: 6px;
    align-items: center;

    &:last-child {
        margin-bottom: 0;
    }


    .address-title {
        color: #D9DCE0;
    }

    .row2-title {
        width: 240px;
        color: #EAECEF;
    }

    .row1-title {
        flex: 1 0 0;
        color: #EAECEF;
    }

    .ago {
        color: var(--main);
        margin-left: 10px;
    }

    .wit {
        color: #D9DCE0;
    }
}

.row2 {
    color: #B1B6C6;
    margin-bottom: 12px;
}

.l-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 8px;
}

.l2-num {
    flex: 1 0 0;
}

.l-num {

    flex: 1 0 0;
    // overflow: hidden;


    .i-cons {
        margin-right: 6px;
        width: 16px;
        height: 16px;
    }

    .num-txt {
        font-size: 14px;
    }
}
</style>
